<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建微店</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/set-vstore.css" />
	</head>
	<body>
		<div class="web">
			<!---------------头部----------------->
			<header class="bottom-border">
				<div class="header-btn"><a href="javascript:void(0)">取消</a></div>
				<div class="header-title">创建微小店</div>
				<div></div>
			</header>
			<!---------------内容----------------->
			<div class="content">
				<form action="" method="post" onsubmit="return valiNull('#store-name','.tipwindow');">
					<div class="form-wrap">
						<div class="store-name">
							<p>店铺名称</p>
							<input id="store-name" type="text" name="store-name" placeholder="请输入店铺名称"/>
						</div>
						<input type="submit" class="submit-btn" value="立即开店">
					</div>	
				</form>
				<!--弹窗-->
				<div class="tipwindow">
					<div class="face">
						<img src="img/login-fail.png" alt="" />
					</div>
					<p></p>
				</div>
			</div>
		</div>
		<script>
			//验证是否为空
			function valiNull(inputSelector,tipSelector){
				var selector = document.querySelector(inputSelector);
				var value = selector.value;
				var tipwindow = document.querySelector(tipSelector);
				var p = document.querySelector(tipSelector+">p")
				if(!value){
					tipwindow.style.display="block";
					p.innerText="请填写店铺名称";
					setTimeout(function(){
						tipwindow.style.display="none";
					},5000)
					return false;
				}
				return true;
			}
		</script>
	</body>
</html>
